<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>

<html>

<head>

    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="description" content=""/>
    <meta name="author" content=""/>
	<meta name="_csrf" content="${_csrf.token}"/>
    <meta name="_csrf_header" content="${_csrf.headerName}"/>
    
    <title>HappyHome Admin</title>

    <!-- Bootstrap Core CSS -->
    <link href="<c:url value="/resources/admin/css/bootstrap.min.css"/>" rel="stylesheet"/>

    <!-- Custom CSS -->
    <link href="<c:url value="/resources/admin/css/sb-admin.css"/>" rel="stylesheet"/>

    <!-- Custom Fonts -->
    <link href="<c:url value="/resources/admin/font-awesome-4.1.0/css/font-awesome.min.css"/>" rel="stylesheet" type="text/css"/>

    <!-- ckeditor plugin -->
    <script src="<c:url value="/resources/ckeditor/ckeditor.js"/>" type="text/javascript"></script>
    <!-- end ckeditor -->
    
    <!-- currency plugin-->
    <!-- jQuery Version 1.11.0 -->
    <script src="<c:url value="/resources/admin/js/jquery-1.11.0.js"/>"></script>
    
    <!-- script district -->
    <script>
    $(document).ready(function(){
    	/* global variable for house */
    	id = -1;
   	  	
   	  	/* form submit value */
   	 	$('#myMultiProductForm').submit(function( event ) {
			event.preventDefault(); 
	   		for ( instance in CKEDITOR.instances ){
		        CKEDITOR.instances[instance].updateElement();
		    }
	   		var form = new FormData(document.getElementById('myMultiProductForm'));
	   		
	   		$.ajax({
	   			url: "${pageContext.request.contextPath}/admin/opinions/newSubmit",
	   			type:"POST",
	   			data: form,
	   			dataType: 'text',
	   		    processData: false,
	   		    contentType: false,
		   		beforeSend: function (xhr){ 
		   	        xhr.setRequestHeader($("meta[name='_csrf_header']").attr("content"), $("meta[name='_csrf']").attr("content")); 
		   	    },
	   			success: function (response) {
	   				var result = response.split(";");
	   				id = result[0];
	   				document.getElementById("modal-body-notifycation").innerHTML = '<i class="icon-ok-sign modal-icon"></i> Create successfull!';
	   				$("#myModal").modal('show'); 
	    		},
	   			error: function(jqXHR, textStatus, errorThrown){
	   				alert(textStatus);
	   			}
	   		});
	   		event.unbind();
		});
   	  	
   	  	/* hide modal to redirect to upload images */
   	 	$('#myModal').on('hidden.bs.modal', function (e) {
	   		e.preventDefault(); /* STOP default action */
	   		document.location.href = "${pageContext.request.contextPath}/admin/opinions/list"; 
	   	});
	});
    </script>
    <!-- / script district -->
</head>

<body>
	<c:url value="/j_spring_security_logout" var="logoutUrl" />
	<form action="${logoutUrl}" method="post" id="logoutForm" style="display:none;">
		<input type="hidden" name="${_csrf.parameterName}"
			value="${_csrf.token}" />
	</form>
    <script>
		function formSubmit() {
			document.getElementById("logoutForm").submit();
		}
	</script>
	
    <div id="wrapper">

        <!-- Navigation -->
        <%@ include file="/WEB-INF/pages/admin/navigation.jsp" %>

        <div id="page-wrapper">

            <div class="container-fluid">

                <!-- Page Heading -->
                <div class="row">
                    <div class="col-lg-12">
                        <h1 class="page-header">
                            NEW OPINION
                        </h1>
                        <ol class="breadcrumb">
                            <li class="active">
                                <i class="fa fa-dashboard"></i> Dashboard
                            </li>
                        </ol>
                    </div>
                </div>
                <!-- /.row -->

                <div class="row">
                    <div class="col-lg-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h3 class="panel-title"><i class="fa fa-money fa-fw"></i> NEW OPINION</h3>
                            </div><!-- panel-heading -->
                            <div class="panel-body">
                            	<div class="row">
                            		<form role="form" id="myMultiProductForm" method="post" enctype="multipart/form-data">
							           	<div class="col-lg-12">
							           		<div class="panel panel-default">
							           			<div class="panel-heading">
							           				<h3 class="panel-title">Content</h3>
							           			</div>
							           			<div class="panel-body">
							           				<textarea name="content" id="content" class="col-lg-12">
										            </textarea>
										            <script>
										                CKEDITOR.replace( 'content' );
										            </script>
							           			</div>
							           		</div>
							           	</div>
							           	<div class="col-lg-12">
							           		<div class="form-group col-lg-6 has-feedback" id="form_group_image_thumbnail">
				                                <label>Author</label>
				                                <input class="form-control" type="text" id="author" name="author" />
				                                <span class="glyphicon glyphicon-ok form-control-feedback" style="display:none;" id="image_thumbnail_glyphicon_ok"></span>
							      				<span class="glyphicon glyphicon-remove form-control-feedback" style="display:none;" id="image_thumbnail_glyphicon_remove"></span>
				                            	<div id="image_thumbnail_error" style="display: none;">
											    	<label class="living_font_weight" style="color:#a94442;">Please, choose at least 1 file!</label>
										    	</div>
				                            </div>
							           		<div class="form-group col-lg-6 has-feedback" id="form_group_image_thumbnail">
				                                <label>Image</label>
				                                <input class="form-control" type="file" id="image" name="image" />
				                                <span class="glyphicon glyphicon-ok form-control-feedback" style="display:none;" id="image_thumbnail_glyphicon_ok"></span>
							      				<span class="glyphicon glyphicon-remove form-control-feedback" style="display:none;" id="image_thumbnail_glyphicon_remove"></span>
				                            	<div id="image_thumbnail_error" style="display: none;">
											    	<label class="living_font_weight" style="color:#a94442;">Please, choose at least 1 file!</label>
										    	</div>
				                            </div>
							           	</div>
							           	<div class="col-lg-12">         
	                        				<button type="submit" class="btn btn-default">
	                        					<span class="glyphicon glyphicon-floppy-save"></span> 
												<spring:message code="message.SaveButton" text="default text" />
											</button>
				                            <button type="reset" class="btn btn-default">
				                            	<span class="glyphicon glyphicon-repeat"></span> 
				                            	<spring:message code="message.ResetButton" text="default text" />
											</button>
				                            <button type="button" class="btn btn-default" onclick="backToList()">
				                            	<span class="glyphicon glyphicon-off"></span> 
				                            	<spring:message code="message.ExitButton" text="default text" />
				                            </button>
				                        </div><!-- /col-lg-12 --> 
                        			</form>
                    			</div><!-- /row -->
                			</div><!-- /panel-body -->
                         </div><!-- panel panel-default -->
                     </div><!-- col-lg-12 -->
                </div><!-- /row -->
            </div><!-- /container-fluid -->

          </div><!-- /page-wrapper -->

        </div><!-- /#wrapper -->
		<!-- Modal -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		  <div class="modal-dialog">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
		        <h4 class="modal-title" id="myModalLabel">
		        	<spring:message code="message.FormNotification" text="notification"/>
		        </h4>
		      </div>
		      <div class="modal-body">
		        	<p class="error-text" id="modal-body-notifycation"/>
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-primary" data-dismiss="modal">
		        	<spring:message code="message.closeButton" text="close"/>
		        </button>
		      </div>
		    </div>
		  </div>
		</div>
		<!-- /modal -->
    <!-- Bootstrap Core JavaScript -->
    <script src="<c:url value="/resources/admin/js/bootstrap.min.js"/>"></script>
    <script type="text/javascript">
    function backToList(){
    	document.location.href = "${pageContext.request.contextPath}/admin/opinions/list"; 
    }
    </script>
</body>

</html>
